<template>
  <section>
    <div class="card-header m_10">企业管理</div>
    <el-card class="box-card m_10">
            <el-card>
              <el-form inline>
                 <el-form-item label="企业名称">
                   <el-input v-model="searchCondition.name"></el-input>
                 </el-form-item>
                <el-form-item label="企业类型">
                  <depart-category-selector v-model="searchCondition.categoryName" @change="departCategoryChanged"></depart-category-selector>
                </el-form-item>
                <el-form-item label="区域" v-if="adminInfo.userRole==='ADMIN'">
                  <el-cascader
                    :options="areaTree"
                    v-model="curArea"
                    :show-all-levels="false"
                    :props="props"
                    clearable
                    change-on-select
                    @change="selectDepart">
                  </el-cascader>
                </el-form-item>
                <el-form-item>
                  <el-button size="small" type="primary" @click="refresh">查询</el-button>
                  <el-button size="small" type="primary" @click="newDepart">新增企业</el-button>
                </el-form-item>
              </el-form>
            </el-card>
            <el-table
              :data="departments.content" border stripe
              style="width: 100%">
              <el-table-column
                prop="id"
                label="企业编号"
                width="110">
              </el-table-column>
              <el-table-column prop="name" label="企业名称" ></el-table-column>
              <el-table-column prop="categoryName" label="所属类别" ></el-table-column>
              <el-table-column prop="areaName" label="所属区域" width="120"></el-table-column>
              <el-table-column prop="person" label="企业负责人" width="120"></el-table-column>
              <el-table-column
                prop="phone"
                label="联系电话">
              </el-table-column>
              <el-table-column prop="checked" label="已审核" width="100"></el-table-column>
              <el-table-column prop="checking" label="审核中" width="100"></el-table-column>
              <el-table-column label="操作" width="300">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="resetPwd(scope.row)">重置密码</el-button>
                  <el-button size="mini" type="text" @click="manageZks(scope.row)">中控室管理</el-button>
                  <el-button size="mini" type="text" @click="goPersonRate(scope.row)">人员查询</el-button>
                  <el-button size="mini" @click="editDepart(scope.$index, scope.row)" type="text">编辑</el-button>
                  <el-button size="mini" type="text" @click="deleteDepart(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="mt10">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="departments.totalElements"
                :page-size="departments.size"
                :current-page.sync="currentAdminPage" @current-change="adminPageChange">
              </el-pagination>
            </div>
    </el-card>
    <el-dialog :visible.sync="showDepartEditor" title="添加/编辑 企业" width="50%">
      <depart-editor @close="onDepartEditorClose" :is-close="showDepartEditor"></depart-editor>
    </el-dialog>
    <el-dialog title="重置密码" :visible.sync="showResetPwd" width="500px">
      <el-form ref="form" :rules="passRules" :model="resetUserPasswordForm" label-width="80px" class="demo-form">
        <el-form-item label="密码" prop="password">
          <el-input v-model="resetUserPasswordForm.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="resetPwdCommit('form')">重置</el-button>
          <el-button @click="resetPwdCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </section>
</template>
<script>
import { mapGetters } from "vuex";
import DepartEditor from "./depart-editor";
import DepartCategorySelector from "@/components/depart-category-selector";
import md5 from "js-md5";

export default {
  beforeRouteEnter(to, from, next) {
    next();
  },
  created() {
    this.$store
      .dispatch("getAreasS", { recursion: false, code: "410300" })
      .then(res => {});
    this.refresh();
  },
  mounted() {},
  data() {
    return {
      action: "add",
      searchCondition: { name: "", area: "" },
      curArea: [],
      currentAdminPage: 1,
      showAdminEditor: false,
      showDepartEditor: false,
      showResetPwd: false,
      selectedUser: {},
      resetUserPasswordForm: {
        password: ""
      },
      passRules: {
        password: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          { min: 6, max: 15, message: "长度在 8 到 15 个字符", trigger: "blur" }
        ]
      },
      props: {
        label: "name",
        value: "code",
        children: "children"
      }
    };
  },
  computed: {
    ...mapGetters({
      adminInfo: "adminInfo",
      areaTree: "areaTree",
      currentDepart: "currentDepart",
      departments: "departments"
    })
  },
  methods: {
    departCategoryChanged(id, name) {
      this.searchCondition.categoryId = id;
      this.searchCondition.categoryName = name;
    },
    goPersonRate(row) {
      this.$router.push({
        name: "personRate",
        query: { departId: row.id, departName: row.name }
      });
    },
    selectDepart(value) {
      if (value) {
        this.searchCondition.area = value[value.length - 1];
      }
    },
    manageZks(row) {
      this.$router.push({
        name: "controlRoom",
        query: { departId: row.id, departName: row.name }
      });
    },
    onDepartEditorClose() {
      this.showDepartEditor = false;
      this.adminPageChange(this.currentAdminPage);
    },
    newDepart() {
      this.$store.commit("INIT_CURRENT_DEPARTMENT");
      this.showDepartEditor = true;
    },
    editDepart(index, row) {
      this.$store.dispatch("getOneDepartment", row.id).then(ret => {});
      this.showDepartEditor = true;
    },
    resetPwd(user) {
      this.showResetPwd = true;
      this.selectedUser = user;
      this.resetUserPasswordForm.password = "";
    },
    resetPwdCommit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const payload = {
            username: this.selectedUser.id,
            password: md5(this.resetUserPasswordForm.password)
          };
          this.$store.dispatch("resetDepartPwd", payload).then(ret => {
            this.$notify({
              title: "操作成功",
              type: "success"
            });
            this.showResetPwd = false;
          });
        } else {
          return false;
        }
      });
    },
    resetPwdCancel() {
      this.showResetPwd = false;
    },
    adminPageChange(val) {
      this.$store
        .dispatch(
          "getDepartments",
          Object.assign(this.searchCondition, {
            pageIndex: val - 1
          })
        )
        .then(ret => {});
    },
    edit(data) {
      this.action = "edit";
      this.$store.dispatch("getOneDepartment", data.id).then(ret => {});
    },
    //移除未保存数据
    deleteDepart(row) {
      this.$confirm("确认删除该企业吗?", "提示", {})
        .then(() => {
          this.$store
            .dispatch("deleteDepartments", { id: row.id })
            .then(ret => {
              this.refresh({ pageIndex: 0 });
              this.$notify({
                title: "删除成功",
                type: "success"
              });
            });
        })
        .catch(() => {});
    },
    refresh() {
      this.adminPageChange(this.currentAdminPage);
    }
  },
  components: { DepartEditor, DepartCategorySelector }
};
</script>
<style lang="less">
.m_10 {
  margin: 10px;
}
.m_t_10 {
  margin-top: 10px;
}
.tree_edit {
  float: right;
}
.line {
  border: 0.5px solid #ebeef5;
  margin-top: 20px;
  margin-bottom: 10px;
}
</style>
